8b:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0yv65k-y95kni.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_6mvGaWpkJ6u491JfpivKWYJBRXWD"],"SWRDataProvider"] 8d:T31ee,[V0_FILE]plaintext:file=".editorconfig" root = true [*] indent_style = tab tab_width = 4 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 200 [V0_FILE]plaintext:file=".gitignore" /node_modules/ /*.log* /.env* /*.tsbuildinfo /.next/ /next-env.d.ts /.vercel/ [V0_FILE]markdown:file="README.md" # Decart SDK Realtime Template [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; [V0_FILE]typescriptreact:file="app/layout.tsx" import { type Metadata } from 'next'; import { type ReactNode } from 'react'; import { Toaster } from 'sonner'; import './globals.css'; export const metadata: Metadata = { title: 'Decart Realtime Video-to-Video', description: "A template for working with Decart's realtime AI models", }; export default function ({ children }: { children: ReactNode }) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" 'use client'; import { models, createDecartClient, type DecartSDKError, type RealTimeClient } from '@decartai/sdk'; import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent } from 'react'; import { toast } from 'sonner'; const REALTIME_MODELS = ['mirage', 'lucy_v2v_720p_rt'] as const; type RealtimeModelId = (typeof REALTIME_MODELS)[number]; export default function () { const [connectionState, setConnectionState] = useState<'connected' | 'connecting' | 'disconnected'>('disconnected'); const [apiKey, setApiKey] = useState(''); const [selectedModel, setSelectedModel] = useState(REALTIME_MODELS[0]); const model = useMemo(() => models.realtime(selectedModel), [selectedModel]); const [promptText, setPromptText] = useState(''); const [isSendingPrompt, setIsSendingPrompt] = useState(false); const isLoadedRef = useRef(false); const promptInputRef = useRef(null); const inputVideoRef = useRef(null); const outputVideoRef = useRef(null); const localStreamRef = useRef(null); const realtimeClientRef = useRef(null); useEffect(() => { const savedKey = localStorage.getItem('decart-api-key'); if (savedKey) { setApiKey(savedKey); } }, []); const handleApiKeyChange = (e: ChangeEvent) => { const newKey = e.target.value; setApiKey(newKey); localStorage.setItem('decart-api-key', newKey); }; const handleConnect = async () => { setConnectionState('connecting'); try { localStreamRef.current = await navigator.mediaDevices.getUserMedia({ video: { frameRate: model.fps, width: model.width, height: model.height, }, }); if (inputVideoRef.current) { inputVideoRef.current.srcObject = localStreamRef.current; inputVideoRef.current.play().catch(() => {}); } const client = createDecartClient({ apiKey }); realtimeClientRef.current = await client.realtime.connect(localStreamRef.current, { model, onRemoteStream(remoteStream: MediaStream) { if (outputVideoRef.current) { outputVideoRef.current.srcObject = remoteStream; outputVideoRef.current.play().catch(() => {}); } }, }); console.info('Session ID:', realtimeClientRef.current.sessionId); setConnectionState(realtimeClientRef.current.getConnectionState()); } catch (error) { console.error('Failed to connect', error); setConnectionState('disconnected'); } }; const handleDisconnect = () => { realtimeClientRef.current?.disconnect(); realtimeClientRef.current = null; localStreamRef.current?.getTracks().forEach((t) => t.stop()); localStreamRef.current = null; if (inputVideoRef.current) { inputVideoRef.current.srcObject = null; } if (outputVideoRef.current) { outputVideoRef.current.srcObject = null; } setConnectionState('disconnected'); }; const handleConnectFormSubmit = (e: FormEvent) => { e.preventDefault(); if (connectionState === 'connected') { handleDisconnect(); } else if (connectionState === 'disconnected') { handleConnect(); } }; const handlePromptSubmit = (e: FormEvent) => { e.preventDefault(); const text = promptText.trim(); if (!text || connectionState !== 'connected' || !realtimeClientRef.current || isSendingPrompt) { return; } setIsSendingPrompt(true); toast.info(`Prompt: ${text}`); try { realtimeClientRef.current.setPrompt(text); } catch (error) { console.error(error); toast.error('Failed to send prompt'); } finally { setTimeout(() => setIsSendingPrompt(false), 1000); } }; useEffect(() => { if (!isLoadedRef.current) { isLoadedRef.current = true; return; } toast.dismiss(); switch (connectionState) { case 'connected': toast.success('Connected'); promptInputRef.current?.focus(); break; case 'connecting': toast.loading('Connecting…'); break; case 'disconnected': toast.info('Disconnected'); setPromptText(''); break; } if (!realtimeClientRef.current) { return; } realtimeClientRef.current.on('connectionChange', setConnectionState as any); const onError = (error: DecartSDKError) => { console.error(error); toast.error(error.message ?? 'Unknown error'); }; realtimeClientRef.current.on('error', onError as any); return () => { realtimeClientRef.current?.off('connectionChange', setConnectionState as any); realtimeClientRef.current?.off('error', onError as any); }; }, [connectionState]); return (

Decart Realtime Video-to-Video

Decart API key

Model

); } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ export default { reactStrictMode: true, }; [V0_FILE]json:file="package.json" { "name": "decart-realtime-sdk-starter", "version": "1.0.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "start": "next start", "format": "prettier --write .", "format:check": "prettier --check ." }, "dependencies": { "@decartai/sdk": "^0.0.4", "next": "^15.5.5", "react": "^19.2.0", "react-dom": "^19.2.0", "sonner": "^2.0.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.14", "@types/node": "^24.7.2", "@types/react": "^19.2.2", "@types/react-dom": "^19.2.2", "postcss": "^8.5.6", "prettier": "^3.6.2", "tailwindcss": "^4.1.14", "typescript": "^5.9.3" } } [V0_FILE]javascript:file="postcss.config.mjs" export default { plugins: { '@tailwindcss/postcss': {}, }, }; [V0_FILE]javascript:file="prettier.config.mjs" /** @type {import('prettier').Config} */ export default { singleQuote: true, jsxSingleQuote: true, }; [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "allowImportingTsExtensions": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["./next-env.d.ts", "./**/*.ts", "./**/*.tsx", ".next/types/**/*.ts"], "exclude": ["./node_modules/"] }84:["$","$L8b",null,{"chatId":"fwwaz2F0bsr","children":["$","$L8c",null,{"data":{"@\"active-block\",\"fwwaz2F0bsr\",":{"id":"b_v7stLkZHncQ","messageId":"OLCamfrnDtPPRjaPB8f0y7BKOnexIkbe","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"decart-sdk-template","type":"code-project","project":"decart-sdk-template"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"fwwaz2F0bsr\",":false,"":null},"children":"$L8e"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This